iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
2
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 14

【Day14】讓新手的你也會利用loop ,把wordpress文章漂亮地排列出來(第一部分)

  • 分享至 

  • xImage
  •  

Loop是wordpress一個很核心的機制,沒有了loop,wordpress也就不能夠成為現今,最普及的,要來編寫博文的系統,loop能夠幫助wordpress,整齊地列出文章,用家只需要輕按幾個按鈕,就能夠立即更新最新文章,熱門文章等類別,並且文章整齊列出來。這也是這系統,是這麼出色,這麼棒的原因。Loop的強大,我們是了解得多了,不過loop是長什麼樣子,又是怎樣運作,又該如何使用?

Loop的基本編碼

又來編碼?/images/emoticon/emoticon02.gif

放心吧,這次loop的基本編碼並不複雜,也很容易理解,我們就先提供完整編碼後再解釋吧

<?php if(have_posts()): while( have_posts()):the_post(); ?>

<?php endwhile; else: endif;?>

你第一眼看到的時候,可能會想吐槽說,這究竟哪裡容易?/images/emoticon/emoticon05.gif

其實,它就只是這樣子:

if(have_posts()):如果這網站是有post(相信你還記得post是文章吧)

while( have_posts()):而還有post是沒列出來

the_post(); 那麼就列出來

php endwhile; 假若post已經列完了

else: 或者根本沒有post

endif: 那麼這段編碼可以停止,不用再運行了。

怎樣是不是很簡單呢?/images/emoticon/emoticon82.gif

編碼位置

編碼是基本了解了,不過該放到那裡去?/images/emoticon/emoticon19.gif

您可以嘗試這樣思考,通常你網上購物的時候,都會有一個分類,是屬於最新產品,熱銷產品等的吧。所以啊,我們可以把它,放在在負責分類的archive.php裏面去設定。

不過假若希望讓它,出現在主頁或者某頁面呢?我們可以把它放到index.php,home.php等,適合設定文章為主頁的檔案,詳細內容可以看這裡。當然兩個地方均放也是沒問題的,亦都通常是需要的,因為我們通常除了希望把文章列出來外,亦會希望能夠把文章分類,並為每個分類建立頁面。

不過,我們當我們在製作的時候,編碼都很多,很複雜,所以通常在製作時,都會盡可能把一些複雜的編碼,從主頁檔案分開,所以我們可以像之前建立bootstrap css文件夾那樣,在visual studial code 裏,另行開一個資料夾,然後在內裡,創建php檔案。不過接下來我會先利用首頁,講解一些基本的編碼,所以這裡我們就暫時先開一個檔案,要來編輯首頁文章顯示的部分吧。

完成後像這樣子:

另開一個文件夾來編輯主頁的文章循環

基本設定

開始前,我們就先創4至5個post先吧,然後隨意加入一些內容,這樣可以方便我們之後看到效果。

如何在wordpress加設post

檔案連接

接下來就到重要的部分了,這裡我們先弄好主頁的部分吧。我們檔案是創好了,但需要怎樣做才能連接呢?

我們可以透過編碼get_template_part( '/', '' );來幫忙。

我們假設我們把檔案放在content入面,然後檔案名稱為theme_content,那麼就會這樣子:

<?php get_template_part( 'content/theme', 'content' );?>

假若你的檔案是有兩個字那麼,最後那個字就會放最後,然後其他的部分,即時你是有兩層或三層文件才到你的檔案,都會放在前面,並用/來分隔。

假若你的檔案只有一個字,那麼後方則不用加入,例如檔案放在content/extra入面,然後檔案名稱為theme,那麼就會是:

<?php get_template_part( 'content/extra/theme');?>

設定好後,可以在那個你開設的檔案輸入一些文字,假如正確的話,你在wordpress訪問網站的畫面裡,就會看到你輸入的文字了。

看到文字代表你輸入正確

和require_once的分別/images/emoticon/emoticon13.gif

看到這裡你心裡應該會有個疑問,為何這裡不用require_once,而要特別去使用get_template_part

或者你該這樣想,你會更容易明白,假若你在加入bootstrap選單裏,由使用require_once,改為使get_template_part,那麼有沒有可能?

答案是不,因為bootstrap選單除了把檔案匯入外,我們還需要加入選單的php,好讓選單能夠運作起來。所以我們無論怎樣,在那裡也需要用到require_once加設這個funtion,然後才能正式使用。若真的很想用到get_template_part,充其量,你也只可以把選單的php,由head.php 裡面移出到一個新檔案,然後再利用get_template_part,把它匯入到head.php,不過假若head.php的內容本身已經不多,就無謂多此一舉了。

所以分別在哪?假若簡簡單單的,只需要匯入,無需要再額外使用其他php,就能夠使用,像普通匯入主題檔案那樣,get_template_part就已經足夠了。假若很複雜的,並不是只要匯入就可以,那麼我們就會要用到require_once(當然也可以用include_once,看你在製作什麼吧)。

最後給大家看看,假若你在bootstrap選單使用了get_template_part,就會像這樣子:

bootstrap選單使用了get_template_part會出現error

你會發現是完全運作不了的

顯示文字

我們回到你開設的檔案裏,把loop的基本編碼放進去,然後你刷新一下就會見到,這什麼變化也沒有啊。

加入羅噏基本編碼後不會有任何變化

這是正常的,因為這段編碼,就只是指令電腦,要列出文章,至於要列出什麼,其實我們是沒有說到,思想固化的電腦,當然就不會這麼聰明,自動提供給您。所以我們要加入一些編碼提醒一下電腦。

我們從簡單開始,讓系統顯示文章內容吧

編碼:<?php the_content();?>

你沒看錯,我們透過這短短的編碼就能夠指令wordpress系統,假如編碼正確的話,就會看到文字出來了:

輸入the_content後,文字會出來

不過,不知道為何,現在的文字,並不會自動換行,假如大家亦遇到這情況,可以在style.css裏加入:
p{ word-wrap: break-word;}

word-wrap代表需不需要換行,break-word代表需要換行,設定後問題就會解決了。

顯示標題

雖然現在是有文字了,不過我們還缺乏標題,這時候我們只需要添加編碼:

<h3><?php the_title();?></h3>

就可以完成了,這裡當然不一定用h3,也可以h2,h4之類。

結果如下:

為loop裏的部分加設標題

不顯示完整內容

不過,並不是每個情況,都會想看到完整內容的吧,有時候,這樣會很不方便不方便用家觀看。我們可以把上方the_content的編碼,更改為下方這個編碼:

<?php the_excerpt();?>

這樣,就只會顯示部分內容,結果會像這樣:

the_excerpt只會顯示文章部分內容

今天就先到這裏,我們明天繼續吧。


上一篇
【Day13】使用bootstrap navwalker , 但不會設定multi-layer ?不會改變dropdown menu 顏色?看這篇對了
下一篇
文章分類頁面的上頁按鈕?下頁按鈕?看完這篇你就會設定了
系列文
讓0基礎的你也能製作簡單wordpress主題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
不惑的胖虎
iT邦新手 4 級 ‧ 2021-06-29 23:14:05

從 day11 開始的文章... 越來越難理解

內文
我們假設我們把檔案放在content入面,然後檔案名稱為theme_content,那麼就會這樣子:

content 應該是指 這一篇 新增的 include資料夾 底下的 content.php檔案吧
那 程式碼 這段是要放哪邊?

我要留言

立即登入留言